<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>晚风留言-时间线</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/bootstrap.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
</head>

<style>
    .app-line {
        position: relative;
    }

    .app-line:before {
        background-color: #e7e7e7;
        position: absolute;
        content: "";
        display: block;
        width: 2px;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        z-index: -1;
    }
</style>


<body>


    <div id="app">


        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home"
                    type="button" role="tab" aria-controls="nav-home" aria-selected="true"
                    @click="getgiteeapi">gitee后端提交查看</button>
                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile"
                    type="button" role="tab" aria-controls="nav-profile" aria-selected="false"
                    @clikc="getgiteeui">gitee前端提交查看</button>
                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact"
                    type="button" role="tab" aria-controls="nav-contact" aria-selected="false">说明</button>
            </div>
        </nav>

        <div class="tab-content" id="nav-tabContent">

            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="pt-6">
                    <div class="row" v-for="(item,index) in giteedataapi" :key="index">
                        <div class="col-md-2 d-flex justify-content-center align-items-center app-line">
                            <span class="badge rounded-pill bg-primary">{{item.commit.committer.date}}</span>
                        </div>
                        <div class="col-md-10">
                            <div class="card rounded-0 border-0 shadow my-4">
                                <div class="card-body">
                                    <h5 class="card-title">{{item.commit.message}}</h5>
                                    <p class="card-text"><a :href="item.html_url" target="_blank">代码预览</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="pt-6">
                        <div class="row" v-for="(item,index) in giteedataui" :key="index">
                            <div class="col-md-2 d-flex justify-content-center align-items-center app-line">
                                <span class="badge rounded-pill bg-primary">{{item.commit.committer.date}}</span>
                            </div>
                            <div class="col-md-10">
                                <div class="card rounded-0 border-0 shadow my-4">
                                    <div class="card-body">
                                        <h5 class="card-title">{{item.commit.message}}</h5>
                                        <p class="card-text"><a :href="item.html_url" target="_blank">代码预览</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">

                <div>

                    <div class="card">
                        <div class="card-body">
                            <p>
                                Linson开源作品
                            </p>
                            <p>
                                前后端分离留言版_论坛_博客servlet+Vue+axios+bootstrap5 
                            </p>
                            <p>
                               <a href="https://gitee.com/S88888888" target="_blank">开源地址</a> 
                            </p>

                            <img src="https://portrait.gitee.com/uploads/avatars/user/2189/6568774_S88888888_1635616215.png!avatar200" alt="">
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>





</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            giteedataapi: [],
            giteedataui: []
        },
        created() {
            this.getgiteeapi();
            this.getgiteeui();
        },
        methods: {
            getgiteeapi() {
                axios({
                        method: 'get',
                        url: `https://gitee.com/api/v5/repos/S88888888/message-board_-web-api/commits?access_token=e3611b48fdcfa7cea1dd73aa7c0fea8e&page=1&per_page=20`

                    }).then((res) => {
                        this.giteedataapi = res.data;
                        console.log(this.giteedata);
                    })
                    .catch(function (res) {
                        console.log(res);
                    });

            },
            getgiteeui() {
                axios({
                        method: 'get',
                        url: `https://gitee.com/api/v5/repos/S88888888/message-board_-web-ui/commits?access_token=e3611b48fdcfa7cea1dd73aa7c0fea8e&page=1&per_page=20`
                    }).then((res) => {
                        this.giteedataui = res.data;
                    })
                    .catch(function (res) {
                        console.log(res);
                    });
            }
        }


    })
</script>

</html>